<template>
    <div id="centerTop">
        <div class="centerItem d-flex jc-between">
            <!-- <div v-for="(item,index) in data" :key="index" class="">
                <div class="d-flex mainList" v-if="index<3"> 
                    <div> 
                        <div class="imgName">{{item.name}}</div>
                        <dv-decoration-10 :reverse="true" style="width:150px;height:5px;" />
                        <div class="imgValue d-flex ">
                            <div class="numBox">
                                <countTo :startVal="0" :endVal="item.value" :duration="2000" class="number"
                                :ref="'countTo'+index"></countTo>
                            </div> 
                            <span class="unit">/{{item.unit}}</span>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="centerItem d-flex jc-between">
            <div v-for="(item,index) in data2" :key="index">
                <div class="d-flex mainList" >
                    <!-- <div class="imgBox">
                    <img :src="item.icon" alt="" />
                </div> -->
                    <div>
                        <div class="imgName">{{item.name}}</div>
                        <dv-decoration-10 :reverse="true" style="width:150px;height:5px;" />
                        <div class="imgValue d-flex ">
                            <div  class="numBox">
                                <countTo :startVal="0" :endVal="item.value" :duration="2000" class="number"
                                :ref="'countToo'+index"></countTo>
                            </div>
                            <span class="unit">/{{item.unit}}</span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</template>

<script type="text/javascript">
    import countTo from "vue-count-to"
    export default {
        name: "",
        components: {
            countTo
        },
        props:['totalData'],
        data() {
            return {
                data: [
                    { name: '主体数量', value: 563, icon: '/img/main.png', unit: '个' },
                ],
                data2:[ 
                    { name: '主体数', value: 1006, icon: '/img/main.png', unit: '个' },
                    { name: '总产值', value: 125689, icon: '/img/money.png', unit: '万元' },
                    { name: '品牌数量', value: 103, icon: '/img/brand.png', unit: '个' }, 
                    { name: '总投资', value: 125689, icon: '/img/money.png', unit: '万元' },
                ],
                timer: ''
            }
        },
        mounted() {
            this.data2.forEach((v,i)=>{
                if(i==0){
                    this.data2[i].value=this.totalData.markets
                }else if(i==1){
                    this.data2[i].value=this.totalData.output

                }else if(i==2){
                    this.data2[i].value=this.totalData.brands

                }else if(i==3){
                    this.data2[i].value=this.totalData.invest

                }
            })
            console.log(this.data2)
            this.timer = setInterval(_ => {
                this.start()
            }, 6000)

        },
        beforeDestroy() {
            clearInterval(this.timer)
            this.timer = null
        },
        methods: {
            start() {
                // this.data.forEach((v, i) => {
                //     let name = 'countTo' + i;
                //     this.$refs[name][0].start()
                // })
                this.data2.forEach((v, i) => {
                    let name = 'countToo' + i;
                    this.$refs[name][0].start()
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    #centerTop {
        width: 100%;
        height: 100%;
        display: flex;
        height: 100%;
        flex-wrap: wrap;
        align-content: space-between;
        .centerItem{
           width: 100%;
        }
    }

    .imgBox {
        width: 60px;
        margin-right: 25px;
        position: relative;
        height: 80%;
        border-radius: 50%;

        img {
            width: 100%;
            /* opacity: 0.8; */
            display: block;
        }

        &::after {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba($color: #ffffff, $alpha: 0.1);
            border-radius: 50%;
            overflow: hidden;
        }
    }

    .centerTopRight {
        text-align: right;
    }

    .mainList {
        align-items: center;
        margin-bottom: 50px;
        margin-top: 20px;
        margin-left: 30px;
        margin-right: 30px;
    }

    .imgValue {
        padding-top: 10px;
        .numBox{
            flex: 1;
            position:relative;
            &::before{
                content: "";
                width: 90%;
                height: 100%;
                position: absolute;
                left: 10%;
                top: 20%;
                background: rgba(6,29,61,0.5);
                border-radius: 40px;
                z-index: 1;
            }
        }
        .number {
            font-size: 18px;
            font-weight: 800 !important;
            /* text-shadow: h-shadow v-shadow blur color; */
            text-shadow: 0 0 10px #0097ffFF;
            position:relative;
            z-index: 1;
        }

        .unit {
            padding-left: 10px;
            font-size: 14px; 
            font-style: oblique;
            padding-top: 5px;
            font-weight: 800;
            text-shadow: 0 0 10px #0097ffFF,
        }
    }

    .imgName {
        font-size: 14px;
        font-weight: 600;
        padding-bottom: 10px;
    }
</style>